<template>

  <div style="width: 100px;height: 100px;background-color: #c45656">
    <el-button>dwadwa</el-button>
  </div>
  <el-row>
    <el-col :span="3">
      <div >

      </div>
      <div style="display: flex;">
        <div style="flex: 0 0 auto;">
          <p style="font-size: 32px;font-weight: bold">墨鹄百灵鸟</p>
        </div>

        <div style="flex: 0 0 auto">
          <svg height="100" node-id="1" sillyvg="true" template-height="1200" template-width="1200" version="1.1" viewBox="0 0 1200 1200" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs node-id="124"><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" node-id="6" spreadMethod="pad" x1="716.8633" x2="1097.4515" y1="644.0485" y2="644.0485"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000054980974048488785270000007957848247678965153_" node-id="11" spreadMethod="pad" x1="954.7972" x2="1003.8906" y1="433.4724" y2="433.4724"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000058580429053108573920000014345947836895375497_" node-id="15" spreadMethod="pad" x1="168.6754" x2="217.7688" y1="433.4724" y2="433.4724"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000124871805425041916310000005507593370738010761_" node-id="19" spreadMethod="pad" x1="596.5237" x2="598.7438" y1="925.3066" y2="772.9512"><stop offset="0.000000992013" stop-color="#ffdbd4"/><stop offset="1" stop-color="#ffbfaa"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000045604647470909046150000000566465363971827602_" node-id="28" spreadMethod="pad" x1="830.7541" x2="900.8642" y1="598.3928" y2="433.8947"><stop offset="0.0000004984026" stop-color="#ffdbd4"/><stop offset="1" stop-color="#ffd1bf"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000013872974647051642560000011183341534729263746_" node-id="32" spreadMethod="pad" x1="885.9632" x2="883.0616" y1="445.9274" y2="596.666"><stop offset="0.000000258786" stop-color="#fac1b6"/><stop offset="1" stop-color="#ffded1"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000150087457180910178360000012694831073364957073_" node-id="36" spreadMethod="pad" x1="885.9632" x2="883.0616" y1="445.9366" y2="596.6753"><stop offset="0.000000258786" stop-color="#fac1b6"/><stop offset="1" stop-color="#ffded1"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000065782956104445762230000017014690720434251921_" node-id="41" spreadMethod="pad" x1="-1372.3748" x2="-1442.4849" y1="595.6392" y2="431.1411"><stop offset="0.0000004984026" stop-color="#ffdbd4"/><stop offset="1" stop-color="#ffd1bf"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000064317085151162954790000010180198890864670636_" node-id="45" spreadMethod="pad" x1="-1427.5839" x2="-1424.6823" y1="443.1738" y2="593.9125"><stop offset="0.000000258786" stop-color="#fac1b6"/><stop offset="1" stop-color="#ffded1"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000140709648536381679990000003181965424196892037_" node-id="49" spreadMethod="pad" x1="596.3378" x2="583.6015" y1="149.3406" y2="811.0022"><stop offset="0.0000004984026" stop-color="#ffdbd4"/><stop offset="1" stop-color="#ffd1bf"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000180349115423759815840000016766872926864454547_" node-id="70" spreadMethod="pad" x1="518.0593" x2="654.5067" y1="95.5678" y2="95.5678"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000005955138257616414590000007640247040115860922_" node-id="74" spreadMethod="pad" x1="525.0447" x2="647.5212" y1="100.6961" y2="100.6961"><stop offset="0.0000007667733" stop-color="#121928"/><stop offset="1" stop-color="#1e2d4a"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000142152959805824362850000005565091575472315549_" node-id="78" spreadMethod="pad" x1="393.9695" x2="763.7587" y1="838.2496" y2="838.2496"><stop offset="0.000000129393" stop-color="#ff7b48"/><stop offset="0.5095" stop-color="#ff8548"/><stop offset="1" stop-color="#ff7b48"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000085938950319634241820000015285629588536793506_" node-id="84" spreadMethod="pad" x1="586.283" x2="586.283" y1="825.8783" y2="102.4832"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000127035923352263642670000011855817685371832466_" node-id="88" spreadMethod="pad" x1="586.283" x2="586.283" y1="784.9681" y2="255.7688"><stop offset="0.0000007667733" stop-color="#121928"/><stop offset="1" stop-color="#1e2d4a"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000073679483560488342140000011561131714444397451_" node-id="95" spreadMethod="pad" x1="830.1607" x2="919.7493" y1="527.3519" y2="526.8561"><stop offset="0.0000005271567" stop-color="#19253c"/><stop offset="1" stop-color="#273a5c"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000136388309024667359530000010418199396296319155_" node-id="108" spreadMethod="pad" x1="297.4526" x2="381.3671" y1="1066.2826" y2="963.4197"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000142168950865478836460000008934771450900227235_" node-id="113" spreadMethod="pad" x1="-8734.761" x2="-8820.264" y1="1074.0533" y2="969.2437"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_00000108289873687459440730000009461863667460506524_" node-id="119" spreadMethod="pad" x1="592.8008" x2="592.8008" y1="1109.0255" y2="1223.8093"><stop offset="0.0000007667733" stop-color="#d5dae6"/><stop offset="1" stop-color="#f0faff"/></linearGradient></defs><g node-id="374"><path d="M 826.92 884.75 C 766.54 884.75 719.18 871.96 716.87 871.32 L 728.98 827.24 C 729.55 827.40 789.21 843.38 856.06 837.87 C 941.02 830.86 997.82 793.57 1024.88 727.04 C 1056.49 649.30 1060.20 583.80 1035.89 532.37 C 1005.42 467.89 941.03 447.21 940.38 447.01 L 953.96 403.36 C 957.38 404.43 1038.26 430.41 1077.21 512.83 C 1107.21 576.31 1103.84 654.17 1067.22 744.25 C 1033.47 827.25 961.30 875.41 858.52 883.53 C 847.72 884.38 837.13 884.75 826.92 884.75 Z" fill="url(#SVGID_1_)" fill-rule="nonzero" group-id="1" node-id="247" stroke="none" target-height="481.39" target-width="390.33997" target-x="716.87" target-y="403.36"/></g><g node-id="375"><path d="M 982.41 515.69 L 976.27 515.69 C 964.41 515.69 954.79 506.07 954.79 494.21 L 954.79 372.74 C 954.79 360.88 964.41 351.26 976.27 351.26 L 982.41 351.26 C 994.27 351.26 1003.89 360.88 1003.89 372.74 L 1003.89 494.21 C 1003.89 506.07 994.27 515.69 982.41 515.69 Z" fill="url(#SVGID_00000054980974048488785270000007957848247678965153_)" fill-rule="evenodd" group-id="2" node-id="252" stroke="none" target-height="164.43" target-width="49.100037" target-x="954.79" target-y="351.26"/><path d="M 196.29 515.69 L 190.15 515.69 C 178.29 515.69 168.67 506.07 168.67 494.21 L 168.67 372.74 C 168.67 360.88 178.29 351.26 190.15 351.26 L 196.29 351.26 C 208.15 351.26 217.77 360.88 217.77 372.74 L 217.77 494.21 C 217.77 506.07 208.15 515.69 196.29 515.69 Z" fill="url(#SVGID_00000058580429053108573920000014345947836895375497_)" fill-rule="evenodd" group-id="2" node-id="254" stroke="none" target-height="164.43" target-width="49.100006" target-x="168.67" target-y="351.26"/></g><path d="M 704.01 771.64 L 594.01 773.21 L 484.01 771.64 C 484.01 771.64 486.86 838.30 474.59 885.89 C 468.29 910.31 491.47 931.43 516.68 931.43 L 590.95 931.43 L 597.06 931.43 L 682.12 931.43 C 709.11 931.43 725.54 907.04 719.02 880.85 C 707.27 833.65 704.01 771.64 704.01 771.64 Z" fill="url(#SVGID_00000124871805425041916310000005507593370738010761_)" fill-rule="evenodd" node-id="257" stroke="none" target-height="159.78998" target-width="257.24997" target-x="468.29" target-y="771.64"/><path d="M 478.04 809.28 C 427.78 836.36 346.56 892.61 322.14 899.08 C 239.82 920.90 158.59 983.18 102.55 1200.00 L 1083.05 1200.00 C 1083.05 1200.00 1011.50 967.28 883.27 903.65 C 846.44 886.84 753.94 846.62 711.14 816.93 C 700.02 810.41 675.02 826.28 603.16 825.85 C 537.42 825.47 500.95 822.99 478.04 809.28 Z" fill="#f2f3f4" fill-rule="evenodd" node-id="259" stroke="none" target-height="390.71997" target-width="980.50006" target-x="102.55" target-y="809.28"/><path d="M 330.07 1039.88 C 330.07 1039.88 273.32 1067.97 258.48 1200.00 L 280.04 1200.00 C 280.04 1200.00 287.82 1119.96 330.07 1039.88 Z" fill="#dde9f2" fill-rule="evenodd" node-id="261" stroke="none" target-height="160.12" target-width="71.59" target-x="258.48" target-y="1039.88"/><path d="M 841.65 1047.50 C 841.65 1047.50 889.87 1091.05 904.29 1200.00 L 877.69 1200.00 C 877.70 1200.00 883.90 1127.59 841.65 1047.50 Z" fill="#dde9f2" fill-rule="evenodd" node-id="263" stroke="none" target-height="152.5" target-width="62.639954" target-x="841.65" target-y="1047.5"/><path d="M 820.63 441.68 C 820.63 441.68 919.75 388.61 944.89 436.47 C 970.03 484.33 908.85 644.76 820.63 611.16 L 820.63 441.68 Z" fill="url(#SVGID_00000045604647470909046150000000566465363971827602_)" fill-rule="evenodd" group-id="3" node-id="267" stroke="none" target-height="256.15002" target-width="149.40002" target-x="820.63" target-y="388.61"/><path d="M 884.30 445.96 C 884.30 445.96 936.65 431.53 933.38 471.63 C 930.11 511.73 906.62 593.37 835.09 596.20 L 884.30 445.96 Z" fill="url(#SVGID_00000013872974647051642560000011183341534729263746_)" fill-rule="evenodd" group-id="3" node-id="269" stroke="none" target-height="164.67001" target-width="101.56" target-x="835.09" target-y="431.53"/><path d="M 884.30 445.97 C 884.30 445.97 936.65 431.54 933.38 471.64 C 930.11 511.74 906.62 593.38 835.09 596.21 L 884.30 445.97 Z" fill="url(#SVGID_00000150087457180910178360000012694831073364957073_)" fill-rule="evenodd" group-id="3" node-id="271" stroke="none" target-height="164.67001" target-width="101.56" target-x="835.09" target-y="431.54"/><path d="M 354.12 608.40 C 265.90 642.00 204.72 481.57 229.86 433.71 C 255.00 385.85 354.12 438.92 354.12 438.92 L 354.12 608.40 Z" fill="url(#SVGID_00000065782956104445762230000017014690720434251921_)" fill-rule="evenodd" group-id="4" node-id="276" stroke="none" target-height="256.15" target-width="149.4" target-x="204.72" target-y="385.85"/><path d="M 290.45 443.20 C 290.45 443.20 238.10 428.77 241.37 468.87 C 244.65 508.97 268.13 590.61 339.66 593.44 L 290.45 443.20 Z" fill="url(#SVGID_00000064317085151162954790000010180198890864670636_)" fill-rule="evenodd" group-id="4" node-id="278" stroke="none" target-height="164.67001" target-width="101.56" target-x="238.1" target-y="428.77"/><path d="M 890.32 508.61 C 890.32 751.08 709.25 813.05 589.73 813.05 C 473.00 813.05 289.14 751.08 289.14 508.61 C 289.14 266.14 301.79 136.82 589.73 136.82 C 846.43 136.82 890.32 266.14 890.32 508.61 Z" fill="url(#SVGID_00000140709648536381679990000003181965424196892037_)" fill-rule="evenodd" node-id="281" stroke="none" target-height="676.23" target-width="601.18" target-x="289.14" target-y="136.82"/><path d="M 673.20 406.64 C 674.82 382.04 698.80 385.33 713.55 386.31 C 731.90 387.53 766.72 395.03 797.61 419.23 C 811.29 429.95 812.76 440.09 789.15 433.87 C 757.55 425.55 736.14 423.39 722.51 421.32 C 701.10 418.08 672.35 419.55 673.20 406.64 Z" fill="#3a302e" fill-rule="evenodd" node-id="283" stroke="none" target-height="58.049988" target-width="140.41003" target-x="672.35" target-y="382.04"/><path d="M 455.05 420.55 C 441.72 422.57 420.78 424.69 389.87 432.82 C 366.77 438.90 368.21 428.98 381.59 418.50 C 411.81 394.83 445.86 387.49 463.82 386.30 C 478.24 385.34 501.70 382.13 503.29 406.19 C 504.12 418.81 476.00 417.37 455.05 420.55 Z" fill="#3a302e" fill-rule="evenodd" node-id="285" stroke="none" target-height="56.76999" target-width="137.35" target-x="366.77" target-y="382.13"/><path d="M 612.49 624.47 C 612.49 631.94 600.83 638.00 586.44 638.00 C 572.05 638.00 560.39 631.94 560.39 624.47 C 560.39 617.00 572.05 601.69 586.44 601.69 C 600.82 601.69 612.49 617.00 612.49 624.47 Z" fill="#ffcbbb" fill-rule="nonzero" node-id="287" stroke="none" target-height="36.309998" target-width="52.099976" target-x="560.39" target-y="601.69"/><path d="M 456.54 442.39 C 444.01 442.39 432.86 450.75 425.71 463.73 L 431.90 470.00 L 422.72 470.00 C 419.38 478.15 417.46 487.60 417.46 497.70 C 417.46 528.25 434.96 553.01 456.55 553.01 C 478.14 553.01 495.64 528.25 495.64 497.70 C 495.64 467.15 478.13 442.39 456.54 442.39 Z" fill="#3a302e" fill-rule="evenodd" group-id="5,10" node-id="293" stroke="none" target-height="110.619995" target-width="78.18002" target-x="417.46" target-y="442.39"/><path d="M 478.41 487.37 C 478.41 496.32 474.35 503.58 469.34 503.58 C 464.33 503.58 460.27 496.32 460.27 487.37 C 460.27 478.42 464.33 471.16 469.34 471.16 C 474.35 471.16 478.41 478.42 478.41 487.37 Z" fill="#fff9f8" fill-rule="evenodd" group-id="5,10" node-id="295" stroke="none" target-height="32.419983" target-width="18.140015" target-x="460.27" target-y="471.16"/><path d="M 722.92 442.39 C 735.45 442.39 746.60 450.75 753.75 463.73 L 747.56 470.00 L 758.79 475.74 C 762.13 483.89 762.00 487.61 762.00 497.71 C 762.00 528.26 744.50 553.02 722.91 553.02 C 701.32 553.02 683.82 528.26 683.82 497.71 C 683.82 467.16 701.33 442.39 722.92 442.39 Z" fill="#3a302e" fill-rule="evenodd" group-id="5,11" node-id="300" stroke="none" target-height="110.630005" target-width="78.31" target-x="683.82" target-y="442.39"/><path d="M 713.84 487.37 C 713.84 496.32 709.78 503.58 704.77 503.58 C 699.76 503.58 695.70 496.32 695.70 487.37 C 695.70 478.42 699.76 471.16 704.77 471.16 C 709.78 471.16 713.84 478.42 713.84 487.37 Z" fill="#fff9f8" fill-rule="evenodd" group-id="5,11" node-id="302" stroke="none" target-height="32.419983" target-width="18.140015" target-x="695.7" target-y="471.16"/><path d="M 476.69 620.81 C 476.69 632.94 455.33 642.78 428.97 642.78 C 402.61 642.78 381.25 632.94 381.25 620.81 C 381.25 608.68 402.61 598.84 428.97 598.84 C 455.33 598.84 476.69 608.68 476.69 620.81 Z" fill="#ffc2c2" fill-rule="evenodd" node-id="306" stroke="none" target-height="43.940002" target-width="95.44" target-x="381.25" target-y="598.84"/><path d="M 806.77 620.81 C 806.77 632.94 785.41 642.78 759.05 642.78 C 732.69 642.78 711.33 632.94 711.33 620.81 C 711.33 608.68 732.69 598.84 759.05 598.84 C 785.41 598.84 806.77 608.68 806.77 620.81 Z" fill="#ffc2c2" fill-rule="evenodd" node-id="308" stroke="none" target-height="43.940002" target-width="95.44" target-x="711.33" target-y="598.84"/><path d="M 553.85 693.11 C 553.85 693.11 588.14 712.30 631.75 693.11" fill="none" node-id="310" stroke="#ffb094" stroke-linecap="round" stroke-width="10" target-height="19.190002" target-width="77.900024" target-x="553.85" target-y="693.11"/><path d="M 569.82 715.78 C 579.86 717.10 597.74 718.70 614.00 716.31 C 616.28 715.98 617.45 718.94 615.53 720.21 C 610.09 723.82 602.12 727.90 593.37 728.37 C 583.76 728.89 574.33 723.81 568.31 719.66 C 566.46 718.39 567.59 715.49 569.82 715.78 Z" fill="#fcc9bb" fill-rule="evenodd" node-id="312" stroke="none" target-height="13.400024" target-width="50.98999" target-x="566.46" target-y="715.49"/><path d="M 294.62 316.39 L 294.62 448.18 L 280.36 464.30 C 280.36 464.30 221.87 381.74 256.87 274.68 C 287.98 179.48 294.62 316.39 294.62 316.39 Z" fill="#593f2a" fill-rule="evenodd" node-id="314" stroke="none" target-height="284.82" target-width="72.75" target-x="221.87" target-y="179.48"/><path d="M 714.83 816.73 C 675.52 827.93 598.15 836.74 581.56 838.55 C 579.45 838.78 577.31 838.79 575.20 838.59 C 559.38 837.04 488.47 829.67 451.05 818.93 C 440.29 815.84 428.58 818.91 421.20 826.69 C 409.34 839.18 395.40 856.82 403.18 863.92 C 415.82 875.44 481.87 883.00 578.38 883.00 C 674.89 883.00 746.41 872.55 759.06 861.03 C 767.04 853.75 757.53 838.56 744.87 824.77 C 737.55 816.80 725.71 813.63 714.83 816.73 Z" fill="#dde9f2" fill-rule="evenodd" node-id="316" stroke="none" target-height="69.369995" target-width="371.63998" target-x="395.4" target-y="813.63"/><path d="M 632.12 136.82 L 540.45 136.82 C 528.09 136.82 518.06 126.80 518.06 114.43 L 518.06 76.70 C 518.06 64.34 528.08 54.31 540.45 54.31 L 632.12 54.31 C 644.48 54.31 654.51 64.33 654.51 76.70 L 654.51 114.44 C 654.51 126.80 644.48 136.82 632.12 136.82 Z" fill="url(#SVGID_00000180349115423759815840000016766872926864454547_)" fill-rule="evenodd" group-id="6" node-id="320" stroke="none" target-height="82.51001" target-width="136.45001" target-x="518.06" target-y="54.31"/><path d="M 625.13 132.60 L 547.43 132.60 C 535.07 132.60 525.04 122.58 525.04 110.21 L 525.04 91.18 C 525.04 78.82 535.06 68.79 547.43 68.79 L 625.13 68.79 C 637.49 68.79 647.52 78.81 647.52 91.18 L 647.52 110.22 C 647.52 122.58 637.50 132.60 625.13 132.60 Z" fill="url(#SVGID_00000005955138257616414590000007640247040115860922_)" fill-rule="evenodd" group-id="6" node-id="322" stroke="none" target-height="63.810005" target-width="122.48004" target-x="525.04" target-y="68.79"/><path d="M 728.67 808.59 C 694.36 823.83 600.44 823.95 585.31 825.75 C 583.38 825.98 460.39 815.55 431.46 803.55 C 406.16 793.05 378.45 830.02 404.36 853.28 C 416.49 864.17 500.72 874.78 588.70 874.78 C 676.68 874.78 749.51 859.41 761.03 847.89 C 768.31 840.61 762.16 793.72 728.67 808.59 Z" fill="url(#SVGID_00000142152959805824362850000005565091575472315549_)" fill-rule="evenodd" node-id="325" stroke="none" target-height="81.73004" target-width="389.86" target-x="378.45" target-y="793.05"/><path d="M 770.85 217.01 C 770.85 217.01 880.74 203.24 898.66 292.43 C 919.72 397.24 913.06 416.87 913.06 416.87 C 913.06 416.87 904.50 420.47 887.81 418.01 C 886.67 417.84 883.76 383.68 883.16 383.58 C 814.32 372.50 652.76 356.10 612.13 278.90 C 612.13 278.90 595.35 316.94 548.19 336.73 C 452.01 377.08 412.47 375.80 342.37 378.94 C 300.07 380.83 282.08 359.64 282.00 292.44 C 281.83 158.57 427.56 217.51 534.37 195.13 C 619.38 177.32 679.36 129.46 770.85 217.01 Z" fill="#593f2a" fill-rule="evenodd" node-id="327" stroke="none" target-height="291.01" target-width="637.89" target-x="281.83" target-y="129.46"/><path d="M 587.03 102.48 C 234.62 102.48 196.21 317.01 195.59 430.45 C 196.21 543.89 221.18 660.32 290.29 729.48 C 358.77 799.11 471.38 821.48 587.03 825.68 C 702.69 828.60 815.13 799.48 883.20 729.66 C 951.95 660.68 976.33 551.01 976.97 430.45 C 976.34 309.90 937.83 102.48 587.03 102.48 Z M 874.86 563.50 C 874.20 580.07 872.98 596.52 869.58 612.55 C 863.99 640.47 851.72 667.09 832.65 687.82 C 813.79 708.68 788.12 746.30 760.30 753.90 C 732.51 761.88 702.57 762.48 676.08 763.33 C 616.31 763.33 556.54 763.33 496.76 763.33 C 470.28 762.48 440.33 761.88 412.54 753.90 C 384.71 746.30 359.04 708.67 340.18 687.81 C 321.12 667.08 308.86 640.47 303.26 612.55 C 299.86 596.53 298.64 580.08 297.98 563.53 C 297.86 541.14 297.75 518.77 297.63 496.37 C 298.23 473.06 299.17 447.82 303.26 428.54 C 308.85 400.62 321.12 374.00 340.19 353.27 C 359.05 332.41 385.36 299.51 413.19 291.91 C 440.98 283.93 470.28 278.61 496.76 277.76 C 556.53 277.76 616.30 277.76 676.08 277.76 C 702.57 278.61 732.52 279.21 760.31 287.19 C 788.14 294.79 813.81 332.42 832.67 353.28 C 851.73 374.01 863.99 400.62 869.58 428.54 C 873.67 447.82 874.60 473.07 875.21 496.38 C 875.09 518.75 874.98 541.11 874.86 563.50 Z" fill="url(#SVGID_00000085938950319634241820000015285629588536793506_)" fill-rule="evenodd" node-id="329" stroke="none" target-height="726.12" target-width="781.38" target-x="195.59" target-y="102.48"/><path d="M 927.68 533.86 C 927.68 710.98 793.63 784.97 598.13 784.97 C 402.63 784.97 244.87 710.99 244.87 533.86 C 244.87 356.73 394.34 255.77 589.83 255.77 C 785.32 255.77 927.68 356.74 927.68 533.86 Z" fill="url(#SVGID_00000127035923352263642670000011855817685371832466_)" fill-rule="evenodd" node-id="331" stroke="none" target-height="529.19995" target-width="682.81" target-x="244.87" target-y="255.77"/><path d="M 544.47 701.64 L 628.10 701.64" fill="none" node-id="333" stroke="#2bf7de" stroke-linecap="round" stroke-width="30" target-height="0" target-width="83.630005" target-x="544.47" target-y="701.64"/><path d="M 447.02 514.70 L 440.45 514.70 C 427.75 514.70 417.46 504.41 417.46 491.71 L 417.46 441.87 C 417.46 429.17 427.75 418.88 440.45 418.88 L 447.02 418.88 C 459.72 418.88 470.01 429.17 470.01 441.87 L 470.01 491.71 C 470.01 504.41 459.72 514.70 447.02 514.70 Z" fill="#2bf7de" fill-rule="evenodd" node-id="335" stroke="none" target-height="95.82001" target-width="52.55002" target-x="417.46" target-y="418.88"/><path d="M 734.33 514.70 L 727.76 514.70 C 715.06 514.70 704.77 504.41 704.77 491.71 L 704.77 441.87 C 704.77 429.17 715.06 418.88 727.76 418.88 L 734.33 418.88 C 747.03 418.88 757.32 429.17 757.32 441.87 L 757.32 491.71 C 757.33 504.41 747.03 514.70 734.33 514.70 Z" fill="#2bf7de" fill-rule="evenodd" node-id="337" stroke="none" target-height="95.82001" target-width="52.559998" target-x="704.77" target-y="418.88"/><path d="M 776.10 293.85 L 775.41 294.14 C 775.41 294.14 927.68 549.84 763.79 761.52 C 865.38 727.40 927.68 654.60 927.68 533.86 C 927.68 420.49 869.36 338.31 776.10 293.85 Z" fill="url(#SVGID_00000073679483560488342140000011561131714444397451_)" fill-rule="evenodd" node-id="339" stroke="none" target-height="467.67" target-width="163.89001" target-x="763.79" target-y="293.85"/><path d="M 157.11 1047.50 C 157.11 1047.50 222.66 1101.90 279.62 1109.34 L 275.70 1119.94 C 275.70 1119.94 215.04 1110.35 151.95 1058.08 L 157.11 1047.50 Z" fill="#ff8548" fill-rule="evenodd" node-id="341" stroke="none" target-height="72.43994" target-width="127.67" target-x="151.95" target-y="1047.5"/><path d="M 1019.29 1047.50 C 1019.29 1047.50 938.03 1103.21 881.07 1110.65 L 886.16 1123.75 C 886.16 1123.75 961.35 1110.35 1024.45 1058.08 L 1019.29 1047.50 Z" fill="#ff8548" fill-rule="evenodd" node-id="343" stroke="none" target-height="76.25" target-width="143.37994" target-x="881.07" target-y="1047.5"/><path d="M 279.62 1109.34 C 279.62 1109.34 290.92 1113.80 299.62 1111.67 L 296.97 1121.20 C 296.97 1121.20 288.57 1122.88 275.70 1119.93 L 279.62 1109.34 Z" fill="#ed6f43" fill-rule="evenodd" node-id="345" stroke="none" target-height="13.540039" target-width="23.919983" target-x="275.7" target-y="1109.34"/><path d="M 881.01 1110.72 C 881.01 1110.72 875.37 1113.23 867.43 1113.34 L 870.42 1125.41 C 870.42 1125.41 873.29 1126.70 886.16 1123.75 L 881.01 1110.72 Z" fill="#ed6f43" fill-rule="evenodd" node-id="347" stroke="none" target-height="15.97998" target-width="18.72998" target-x="867.43" target-y="1110.72"/><path d="M 967.57 1026.05 C 967.57 1026.05 976.98 1024.93 993.89 1011.49 C 968.90 973.93 938.92 938.98 904.30 915.87 C 904.30 915.87 904.15 920.74 869.04 931.42 C 869.03 931.43 929.54 1000.81 967.57 1026.05 Z" fill="#c8d3db" fill-rule="evenodd" node-id="349" stroke="none" target-height="110.18005" target-width="124.859985" target-x="869.03" target-y="915.87"/><path d="M 306.90 467.65 C 305.35 467.65 303.77 467.44 302.20 466.99 C 293.09 464.40 287.81 454.92 290.40 445.81 C 304.04 397.83 332.93 358.11 373.93 330.96 C 404.91 310.45 432.09 304.23 433.23 303.97 C 442.47 301.91 451.63 307.73 453.69 316.97 C 455.75 326.20 449.95 335.34 440.74 337.42 C 440.12 337.57 417.39 343.03 391.76 360.27 C 357.79 383.13 334.78 415.06 323.38 455.17 C 321.24 462.73 314.37 467.65 306.90 467.65 Z" fill="#aee2ff" fill-rule="nonzero" group-id="7" node-id="353" stroke="none" target-height="165.73999" target-width="167.94" target-x="287.81" target-y="301.91"/><path d="M 317.64 501.89 C 317.64 511.05 310.22 518.47 301.06 518.47 C 291.90 518.47 284.48 511.05 284.48 501.89 C 284.48 492.73 291.90 485.31 301.06 485.31 C 310.22 485.31 317.64 492.73 317.64 501.89 Z" fill="#aee2ff" fill-rule="evenodd" node-id="356" stroke="none" target-height="33.159973" target-width="33.160004" target-x="284.48" target-y="485.31"/><path d="M 501.79 1120.08 C 424.53 1114.95 358.52 1097.18 305.59 1067.27 C 252.09 1037.03 223.94 1001.13 209.74 976.33 C 190.78 943.20 185.26 910.12 195.35 889.98 C 206.97 866.79 223.19 861.10 234.75 860.41 C 250.15 859.51 265.84 866.98 281.34 882.65 C 290.70 892.12 298.19 905.41 298.88 906.45 L 258.65 926.09 C 252.57 916.97 243.82 909.06 238.54 906.59 C 237.99 907.33 237.25 908.46 236.39 910.13 C 235.01 915.07 236.99 936.13 255.59 963.48 C 280.72 1000.42 346.51 1063.96 504.82 1074.47 L 501.79 1120.08 Z M 236.44 909.95 L 236.44 909.95 Z" fill="url(#SVGID_00000136388309024667359530000010418199396296319155_)" fill-rule="nonzero" group-id="8" node-id="360" stroke="none" target-height="260.56995" target-width="319.56" target-x="185.26" target-y="859.51"/><path d="M 677.11 1127.59 L 674.08 1081.98 C 845.21 1070.62 918.83 997.54 942.53 966.65 C 960.66 943.03 965.18 924.77 964.58 919.34 C 963.00 916.49 961.96 916.30 961.44 916.21 C 951.49 914.47 936.89 914.02 921.82 928.33 L 885.72 904.89 C 893.79 897.18 931.38 864.60 969.25 871.17 C 980.41 873.11 995.83 879.62 1005.87 899.65 C 1014.59 917.04 1010.16 943.48 993.73 972.18 C 972.90 1008.57 936.28 1042.93 890.61 1068.94 C 831.97 1102.34 760.14 1122.07 677.11 1127.59 Z M 964.51 918.86 L 964.51 918.86 C 964.51 918.86 964.51 918.87 964.51 918.86 Z" fill="url(#SVGID_00000142168950865478836460000008934771450900227235_)" fill-rule="nonzero" group-id="9" node-id="365" stroke="none" target-height="262.99" target-width="340.51" target-x="674.08" target-y="864.6"/><path d="M 709.11 1200.00 L 476.49 1200.00 L 476.49 1088.35 C 476.49 1069.67 494.07 1054.48 515.68 1054.48 L 669.92 1054.48 C 691.53 1054.48 709.11 1069.67 709.11 1088.35 L 709.11 1200.00 Z" fill="#dde9f2" fill-rule="nonzero" node-id="368" stroke="none" target-height="145.52002" target-width="232.62" target-x="476.49" target-y="1054.48"/><path d="M 522.20 1100.19 L 663.40 1100.19 L 663.40 1177.15 L 522.20 1177.15 Z" fill="#dde9f2" fill-rule="nonzero" node-id="370" stroke="none" target-height="76.96008" target-width="141.20001" target-x="522.2" target-y="1100.19"/><path d="M 675.59 1200.00 L 510.01 1200.00 L 510.01 1106.26 C 510.01 1098.37 516.41 1091.97 524.30 1091.97 L 661.30 1091.97 C 669.19 1091.97 675.59 1098.37 675.59 1106.26 L 675.59 1200.00 Z" fill="url(#SVGID_00000108289873687459440730000009461863667460506524_)" fill-rule="evenodd" node-id="372" stroke="none" target-height="108.03003" target-width="165.58002" target-x="510.01" target-y="1091.97"/></svg>

        </div>
      </div>
    </el-col>
    <el-col :span="21">

    </el-col>


  </el-row>
  <el-row>
    <el-col :span="2">
      <svg t="1705304404361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19211" width="30" height="30"><path d="M482.35551 289.647441c-18.844077 0-37.121699 5.513498-52.944682 15.785219-21.714117 14.161381-36.668535 35.913262-41.993214 61.365983-5.400207 25.528249-0.566455 51.471899 13.557162 73.186016 21.223189 32.51453 111.025225 87.68727 163.025815 116.463195l2.983331-1.963711c-42.635197-42.748488-87.68727-88.593598-130.813394-138.290603-4.078478-4.72046-3.625313-11.140286-3.247677-13.708217 0.264346-2.303585 1.510547-8.421301 6.759699-11.782269 4.342823-2.832276 9.969612-2.605694 14.350199 0.490928l1.623838 1.170674c19.561587 14.161381 27.303142 15.709692 29.720018 15.709692 0 0.151055 0.490928-0.490928 0.604219-2.56793 0.793037-9.894085-0.264346-20.61897-3.209913-32.892167-2.56793-10.649358-4.833751-18.655259-7.288391-26.056941-2.341348-6.759699 0.679746-15.445346 6.759699-19.448296 3.172149-2.001475 6.608644-2.530167 9.894085-1.85042 2.605694 0.641983 6.117716 2.341348 8.761174 6.684172l109.779023 185.23086c-5.966662-40.747013-23.337955-147.580469-46.638147-183.304912C546.025077 306.187933 515.436495 289.647441 482.35551 289.647441z" fill="#272636" p-id="19212"></path><path d="M495.157398 436.170527c28.700398 31.155038 57.702906 60.724001 85.421449 88.669125l-67.068299-113.139991C509.922997 426.46526 502.332497 433.224959 495.157398 436.170527z" fill="#272636" p-id="19213"></path><path d="M953.079805 573.819147l-6.193244-20.770025-6.419826-20.279097L932.762944 514.001475l-7.1751-18.806314-7.363918-18.353149-6.684172-18.088804-5.664552-18.806314-4.418351-18.730786 0.981856-8.685647 3.927423-8.119192 4.078478-8.761174 1.057383-8.005901-3.549786-16.61602-4.191769-16.351674-4.456114-16.842602-5.135861-16.162856-5.43797-16.351674L882.990412 289.269804 876.872695 272.955893l-6.45759-15.936274L863.27777 241.989674l-7.779318-15.218764L848.172297 211.627674l23.224664-14.387963L863.27777 183.153858l-9.176575-13.141761L844.962384 156.71928l-9.289866-12.688597-8.610119-10.573831-9.138811-10.196194-9.138811-9.176575-9.44092-9.176575-9.591975-8.685647 21.260953-8.081428L800.09913 80.814279l-10.611595-7.779318-11.253577-6.684172L767.131435 60.044254l-11.555687-6.382062-11.744505-5.589025-12.122142-5.513498-12.877416-5.098097-12.499779-4.947042-12.650833-4.758224-15.256528-4.984806L663.243546 18.881841l-15.407582-4.191769-14.992182-3.474259-15.822983-3.209913-15.634164-2.492403-15.785219-2.001475-15.89851-1.472784-15.558637-1.019619-15.860746-0.528692L522.687122 0l-16.351674 0.528692-15.822983 0.528692-15.671928 0.981856-15.747455 1.472784-15.558637 2.001475-16.351674 2.492403-16.125092 3.209913-16.351674 3.021095-16.238383 3.28544L362.342528 22.318336 346.066381 26.774451 329.676944 31.985839 314.042779 37.461573 298.710724 43.541525 283.680779 50.86768 268.273197 57.627379 253.771943 65.293406 239.38398 74.05458 225.713527 82.626936 212.609529 92.294439 199.732114 102.528397l-11.555687 10.196194-11.140286 10.573831L166.424546 134.476471 156.266116 145.994394 146.56085 158.87181 136.931111 171.031716l-8.685647 13.141761L120.126272 197.692875 112.082608 211.627674 104.983036 225.713527l-6.079953 14.350199-6.042189 14.161381-5.173624 14.727836L83.193391 283.643015 79.530314 298.97507l-3.021095 14.614545L72.090869 345.046762 70.391503 375.861927l0.755274 30.966219 2.983331 30.362 4.871515 30.550819 8.194719 29.871072 10.120667 29.002508 76.320401 123.902641c129.453902 133.305797 123.978168 266.46054 123.978168 266.46054l0.339873 26.321286 0.981856 80.700988 441.155333 0 1.85042-8.156955 0-25.868122 1.057383-25.905886 1.925948-57.853961 3.021095-29.455672 1.397256-6.910754 2.756749-5.626789 2.945567-5.060333 3.927423-4.191769 5.249152-2.907804 5.966662-2.077003 6.608644-2.15253 7.1751-1.019619 9.214338-0.944092 8.610119-0.528692 2.15253 0 8.647883 0.944092 8.119192 0.528692 8.647883 1.019619 7.930373 0.71751 9.101047 0.981856 8.723411 0.944092-21.714117 0.528692 9.629739 1.019619 9.74303 0.453164 10.536067 0.566455 6.193244-0.566455 6.419826-1.472784 6.608644-2.454639 6.268771-3.209913 6.004425-3.927423 5.135861-4.682697 4.30506-4.947042 3.776368-5.286915 2.454639-11.102522-1.359493-12.159906-2.303585-12.008851 0-11.668978 1.812657-5.211388 2.416876-4.418351 2.416876-4.758224 3.021095-3.965187 3.134386-4.191769 2.492403-4.493878 2.001475-4.607169 0.528692-4.984806-0.528692-5.702316-0.981856-4.984806-1.510547-5.135861-2.492403-4.909279-3.625313-4.758224-3.965187-4.418351-4.72046-3.58755-5.400207-3.58755 5.891134-3.021095 5.664552-3.474259 5.777843-4.191769 3.851896-3.927423 3.512022-4.72046 2.15253-4.947042 1.13291-4.682697-1.13291-4.947042-5.626789-17.824458-3.512022-16.427202-2.15253-14.992182 0-14.954418 8.610119-3.436495 7.703791-3.474259 6.721935-3.700841 5.43797-4.00295 4.191769-4.380587 2.530167-4.72046 1.43502-4.909279L953.079805 573.819147zM511.395781 130.66234l35.460097 25.94365L493.495796 229.980823l-35.535625-25.981413L511.395781 130.66234zM225.260363 383.263608 215.252987 340.439593l100.942322-23.48901L326.127157 359.887889 225.260363 383.263608zM316.686237 287.608202 237.571323 243.198112l21.563062-38.367901L338.36259 249.315828 316.686237 287.608202zM384.094409 117.180705l35.913262 83.268919-40.40714 17.409057-35.875498-83.306682L384.094409 117.180705zM560.299749 591.303732c-6.193244-3.323204-152.640802-81.64508-186.477062-133.607907-39.085411-59.930963-22.016227-140.480897 37.839209-179.49078 21.147662-13.708217 45.543-20.996607 70.618085-20.996607 44.183508 0 84.892757 22.05399 108.948222 58.949108 32.967694 50.641098 52.529282 201.771353 54.606284 218.76501l0.71751 6.382062-80.965334 52.793627L560.299749 591.303732zM679.330875 675.705561c-13.217289 8.572356-24.92403 12.688597-35.762207 12.688597-3.172149 0-6.306535-0.377637-9.214338-1.057383-13.103998-2.983331-20.052515-11.89556-21.789644-14.614545-1.095147-1.208438-3.021095-3.360968-4.682697-5.928898l-35.422334-54.341938 93.691695-60.950583 35.422334 54.341938c1.586075 2.341348 2.756749 4.833751 3.851896 7.250627 1.170674 1.85042 1.85042 4.040714 2.379112 5.815607C710.599203 628.387668 713.582534 653.009588 679.330875 675.705561z" fill="#272636" p-id="19214"></path></svg>
    </el-col>
    <el-col :span="12">
      <el-input v-model="yourquestion" placeholder="请输入你的问题" />
    </el-col>
    <el-col :span="10">
      <a href="#"  @click="sendMsg">
        <svg t="1705305291759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28709" width="40" height="40"><path d="M548.821333 414.848a42.666667 42.666667 0 0 1 63.872 56.32l-3.541333 4.010667-125.866667 125.866666a42.666667 42.666667 0 0 1-63.872-56.32l3.541334-4.010666 125.866666-125.866667z" fill="#03CD8E" p-id="28710"></path><path d="M818.56 91.946667L144.682667 332.544l3.712-0.896a85.333333 85.333333 0 0 0-67.242667 82.517333l0.213333 6.954667a85.333333 85.333333 0 0 0 58.624 75.008l2.688 0.768L420.266667 602.88l106.752 277.418667-1.152-4.266667a85.333333 85.333333 0 0 0 83.2 66.389333l6.954666-0.298666a85.333333 85.333333 0 0 0 74.410667-59.349334l0.896-3.285333 242.304-677.802667c13.696-28.8 6.954667-67.413333-18.474667-92.842666a85.333333 85.333333 0 0 0-96.597333-16.896z m32.512 78.805333l3.754667-1.578667-244.352 683.008-1.408 4.906667-1.792-5.845333-107.093334-278.186667a84.906667 84.906667 0 0 0-50.901333-50.389333L171.818667 416.682667l-5.333334-1.664 5.333334-1.493334 679.253333-242.773333z" fill="#049DEE" p-id="28711"></path></svg>
      </a>
    </el-col>
  </el-row>
  <el-row>
    <el-input
        v-model="reMsg"
        :rows="2"
        type="textarea"
    />
  </el-row>


</template>

<script>

import {apiAcceptData} from "@/api";
export default {
  name: "TestWebSocket",
  data(){
    return{
      APPID:'2882104b',
      API_SECRET:'ZjY0ODAxZDM5NmMzYzA3NzdhY2ExZDEw',
      API_KEY:'6837c462a46b5fd779f278cb062d84f2',
      startFireHost:'https://spark-api.xf-yun.com/v3.1/chat',
      startFireUrl:'wss://spark-api.xf-yun.com/v3.1/chat',
      Url:'/websocket/starfire/wangzhenxuan',
      websocket:null,
      domain: "generalv3",
      temperature: 0.5,
      max_tokens: 1024,

      userid:'wangzhenxuan',

      reMsg :'',
      yourquestion:'',

      websocketIsOpen:false

    }
  },
  methods: {
    async initWebSocket() {
      try{
        const wsuri = await this.getStarFireUrl();
        this.websocket = new WebSocket(wsuri);
        this.websocket.onopen = this.websocketonopen;
        this.websocket.onerror = this.websocketonerror;
        this.websocket.onmessage = this.websocketonmessage;
        this.websocket.onclose = this.websocketclose;
        return this.websocket
      }catch (error){
        console.log("异常，"+error)
      }

    },
    async getStarFireUrl(){
      const url = await apiAcceptData('/starfire/auth',null);
      return url;
    },

    websocketonopen(){
      console.log('WebSocket连接成功')
      this.websocketIsOpen  =true

    },
    websocketonerror(error){
      console.log("连接错误,"+error)
      console.log(error)
    },
    websocketonmessage(event){
      // 将获取的data转换为json格式
      const result = JSON.parse(event.data);
      // 处理接收到的json数据
      const strapi = result.payload.choices.text[0].content

      this.reMsg += strapi;
      console.log('收到消息:', event.data);

    },
    websocketclose(){
      console.log('WebSocket失去连接')
      this.websocketIsOpen  = false
    },
    async sendMsg(){
      // 发送消息
      let params = {
        "header": {
          "app_id": this.APPID,
          "uid": this.userid
        },
        "parameter": {
          "chat": {
            "domain": this.domain,
            "temperature": this.temperature,
            "max_tokens": this.max_tokens,
          }
        },
        "payload": {
          "message": {
            // 如果想获取结合上下文的回答，需要开发者每次将历史问答信息一起传给服务端，如下示例
            // 注意：text里面的所有content内容加一起的tokens需要控制在8192以内，开发者如有较长对话需求，需要适当裁剪历史信息
            "text": [
              {
                "role": "user",
                "content": "你是谁？"
              },
              {
                "role": "assistant",
                "content": "我的墨鹄百灵鸟，有什么需要帮您！"
              },
              { "role": "user", "content": this.yourquestion }
            ]
          }
        }
      };
      if(this.websocketIsOpen){
        this.websocket.send(JSON.stringify(params))
      }else{
        this.websocket = await this.initWebSocket()
        setTimeout(() => {
          // "对话完成，手动关闭连接"
          this.websocket.send(JSON.stringify(params))
        }, 1000)

      }



    }
  }

}
</script>

<style scoped>

</style>